
//1.引入 转容器组件的插件
import { connect } from 'react-redux';

//引入动作
import { incrementAction, decrementAction, asyncIncrementAction } from '../store/action';

//getState 获取 store 中的数据
//用于显示的是ui组件
function Count(props) {
    return (
        <div >
            STORE中的数据是：{props.state}
            <button onClick={() => { props.incrementAction(5) }}>++</button>
            <button onClick={() => { props.decrementAction(3) }}>--</button>
            <button onClick={() => { props.asyncIncrementAction(2) }}>延时2秒++</button>
        </div>
    );
}
//容器组件的写法

//用于 处理逻辑和调用  redux 的是容器组件
//connect 将 ui组件转容器组件
//第一个参数 ： 是一个函数，将 state的值映射到 props
//第二个参数：可以是函数也可以是对象 ，dispatch映射关系
// export default connect(state => ({ count: state }),
//     {
//         increment: incrementAction,
//         decrement: decrementAction,
//         asyncIncrement: asyncIncrementAction
//     }
// )(Count);


export default connect(state => ({ state }),
    {
        incrementAction,
        decrementAction,
        asyncIncrementAction
    }
)(Count);

//新式写法